import React, { Component } from 'react';
import { connect } from 'dva';
import { Row,Col,Modal,Table,Button } from 'antd';
import styles from './Analysis.less';
import ExportJsonExcel from 'js-export-excel';//导出
/* eslint react/no-danger:0 */
@connect(({ statisticchart, loading }) => ({
  statisticchart,
  loading: loading.effects['statisticchart/fetch'],
}))
class PoliceList extends Component {
  state = {
    modalByPolice: false,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'statisticchart/get_propolice_list',
    });
  }

  columnsByPoliceTotal = [
      {
        title: '序号',
        dataIndex: 'ordernum',
        key: 'ordernum',
      }, {
        title: '行政区划',
        dataIndex: 'company_area',
        key: 'company_area',
      },  {
        title: '职务层次',
        dataIndex: 'duty_level',
        key: 'duty_level',
      }, {
        title: '拟授警衔',
        dataIndex: 'police_rank',
        key: 'police_rank',
      }, {
        title: '总人数',
        dataIndex: 'total',
        key: 'total',
      }
  ];

  columnsByPolice = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },  {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
      }, 	{
        title: '行政区划',
        dataIndex: 'company_area',
        key: 'company_area',
      },  {
        title: '职务',
        dataIndex: 'post',
        key: 'post',
      },  {
        title: '职务层次',
        dataIndex: 'duty_level',
        key: 'duty_level',
      },  {
        title: '拟授警衔',
        dataIndex: 'police_rank',
        key: 'police_rank',
      }
	];

  //导出excel
  downloadExl = () => {
    const {
      statisticchart: {
        policeDetialData
      },
    } = this.props;
    	var option={};
  	  option.fileName = '警力统计信息'
  	  option.datas=[
  	    {
  	      sheetData:policeDetialData.list || [],
  	      sheetName:'警力统计信息',
  	      sheetHeader:['姓名','性别','行政区划','职务','职务层次','拟授警衔'],
  	      columnWidths: [8,8,8,8,8,8],
  	      columnHeights: [10,10,10,10,10,10]
  	    }
  	  ];

  	  var toExcel = new ExportJsonExcel(option);
  	  toExcel.saveExcel();
  }

  //警力信息弹窗
	handleModalByPolice = flag => {
		this.setState({
			modalByPolice: !!flag,
		});
	};

  render() {
    const {
      statisticchart: {
      	policeListData,
        policeDetialData
      },
      modalPoliceVisible,
      handlePoliceModalVisible
    } = this.props;
    const { modalByPolice } = this.state;
    return (
    <div>
     	<Modal
			width={800}
			centered
			destroyOnClose
			title="警力详情"
			visible={modalByPolice}
			onOk={()=> this.handleModalByPolice()}
			onCancel={()=> this.handleModalByPolice()}
			>
      <Button type="primary" icon="download" onClick={this.downloadExl} style={{float: 'right',zIndex: 1000,marginBottom: '10px',marginTop: '-14px'}}>
      导出
      </Button>
			<Table columns={this.columnsByPolice} dataSource={policeDetialData?policeDetialData.list: []}/>
		</Modal>
    <Modal
    	width={800}
    	centered
    	destroyOnClose
    	title="警力统计表"
    	visible={modalPoliceVisible}
    	onOk={()=> handlePoliceModalVisible()}
    	onCancel={()=> handlePoliceModalVisible()}
    	>
    	<Table
        columns={this.columnsByPoliceTotal}
        dataSource={policeListData?policeListData.list: []}
        rowClassName={(record, index) => {
          return styles.statisticListStyle;
        }}
        onRow={record => {
          return {
            onClick: event => {
              handlePoliceModalVisible();
              const { dispatch } = this.props;
              dispatch({
                type: 'statisticchart/get_propolice_detail',
              });
              this.handleModalByPolice(true)
            }, // 点击行
          };
        }}
      />
    </Modal>
    </div>
    );
  }
}

export default PoliceList;
